<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
            color:#685e5d;
        }
        .container{
            width: 920px;
            margin-left: 100px;
            margin-top: 50px;
        }
        h5{
            width: 80px;
            font-size: 16px ;
            color: #e71f0c;
            line-height: 22px;
            border-bottom: 1px solid #e71f0c;
        }
        .head{
            margin-bottom: 15px;
        }
        .nav{
            overflow:hidden ;
            height: 40px;
            font-size: 12px;
            background: #f3f3f3;
            padding: 0px 15px;
            border-bottom: 1.5px solid #a8a9ab;
        }
        .nav li{
            float: left;
            width: 100px;
            line-height: 40px;
        }
        .nav .ha{
            width: 450px;
        }
        .nav .zh{
            width:90px;
            text-align: center;
        }
        .main{
            background: #fef4e8;
            padding: 15px;
            font-size: 12px;
            overflow: hidden;
        }
        .shang>img ,.shang1>img ,.shang2>img ,.shang3>img ,.shang4>img{
            float: left;
            margin-right: 20px;
        }
        .shang{
            overflow: hidden;
        }
        .shang1 ,.shang2 ,.shang3 ,.shang4{
            margin-top: 10px;
        }
        .jie ,.se ,.jia ,.shu ,.ji ,.shan{
            float: left;
        }
        .shao{
            width: 230px;
            overflow: hidden;
        }
        .t{
            height: 18px;
            float: left;
            }
        .jie p{
            float: left;
            line-height: 18px;
            color: #373739;
        }
        .nav .l{
            width: 60px;
        }
        .se{
            width: 200px;
        }
        .jia li{
            display: inline;
        }
        .jia{
            width: 100px;
            text-align: center;
        }
        .shu{
            width: 110px;
            text-align: center;
        }
        .shu input{
            width: 35px;
            text-align: center;
        }
        .ji{
            padding-left: 15px;
        }
        .nav .cao{
            width:70px ;
            margin-left: 10px;
        }
        .ji li{
            width: 50px;
            color: #2f3030;
            font-weight: 900;
        }
        .ji span{
            display: inline-block;
            color: #222324;
        }
        .shan{
            padding-left: 25px;
        }
        .shan button{
            border: none;
            background: none;
            cursor: pointer;
        }
        .shang1 .xia{

        }
        .end{
            padding: 15px;
            float: right;
            color: red
        }
        .end span{
            color: red
        }
        .shul{
            color: red;
        }
        .kg{
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="head">
        <img src="./jd.png" alt="">
        <img src="./cart-icon.png" alt="" class="im2">
    </div>
    <h5>全部商品 <span class="shul"></span></h5>
    <div class="nav">
        <li>商品</li>
        <li class="ha">名称</li>
        <li>单价</li>
        <li class="l">数量</li>
        <li class="zh">小计</li>
        <li class="cao">操作</li>
    </div>
    <div class="main">
        <div class="shang">
            <img src="./guo.jpg" alt="">
            <div class="jie">
                <div class="shao">
                    <div class="t">
                        <img src="./j.png" alt="">
                        <img src="./d.png" alt="">
                    </div>
                    <p>美仑达 赣南脐橙</p>
                    <p> 2017新上市 3斤装 铂金果</p>
                </div>
            </div>
            <div class="se">
                颜色：赣南脐橙铂金果 3斤装
            </div>
            <div class="jia">
                ¥
                <li>25.80</li>
            </div>
            <div class="shu">
                <input type="text" value="1" class="lia">
                <p>有货</p>
            </div>
            <div class="ji">
                <li class="zong">25.8</li>
                <span>1.68</span>kg
            </div>
            <div class="shan">
                <button>删除</button>
            </div>
            <div class="kg">1.68</div>
        </div>
        <div class="shang">
            <img src="./guo1.jpg" alt="">
            <div class="jie">
                <div class="shao">
                    <div class="t">
                        <img src="./d.png" alt="">
                    </div>
                    <p>Camposol 秘鲁进口精选蓝</p>
                    <p>莓 4盒装 单盒约125g 新鲜水果</p>
                </div>
            </div>
            <div class="se">
                颜色：秘鲁蓝莓 4盒装
            </div>
            <div class="jia">
                ¥
                <li>46.90</li>
            </div>
            <div class="shu">
                <input type="text" value="1" class="lia">
                <p>有货</p>
            </div>
            <div class="ji">
                <li class="zong">46.9</li>
                <span>1.25</span>kg
                
            </div>
            <div class="shan">
                <button>删除</button>
            </div>
            <div class="kg">1.25</div>
        </div>
        <div class="shang">
            <img src="./guo.jpg" alt="">
            <div class="jie">
                <div class="shao">
                    <div class="t">
                        <img src="./d.png" alt="">
                    </div>
                    <p>欢乐果园 广西青皮芒果 2个</p>
                    <p>装 单果约260g以上 新鲜水果</p>
                </div>
            </div>
            <div class="se">
                颜色：青皮芒 2粒 尝鲜装
            </div>
            <div class="jia">
                ¥
                <li>10.90</li>
            </div>
            <div class="shu">
                <input type="text" value="1" class="lia">
                <p>有货</p>
            </div>
            <div class="ji">
                <li class="zong">10.9</li>
                <span>0.75</span>kg
            </div>
            <div class="shan">
                <button>删除</button>
            </div>
            <div class="kg">0.75</div>
        </div>
        <div class="shang">
            <img src="./guo1.jpg" alt="">
            <div class="jie">
                <div class="shao">
                    <div class="t">
                        <img src="./d.png" alt="">
                    </div>
                    <p>爱奇果 新疆库尔勒香梨 约</p>
                    <p>2.5kg 当季新果 特级装</p>
                </div>
            </div>
            <div class="se">
                颜色：2.5kg单果约120-150g
            </div>
            <div class="jia">
                ¥
                <li>39.90</li>
            </div>
            <div class="shu">
                <input type="text" value="1" class="lia">
                <p>有货</p>
            </div>
            <div class="ji">
                <li class="zong">39.9</li>
                <span>2.6</span>kg
            </div>
            <div class="shan">
                <button>删除</button>
            </div>
            <div class="kg">2.6</div>
        </div>
        
        <div class="end">
            <p>
                <span>总价</span><span class="endj">51.60</span>
            </p>
        </div>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>